<template>
  <div id="dist">
<!--    <v-distpicker @selected="onSelected"></v-distpicker>-->
 <area-cascader :level="1"
                type="text"
                :data="pcaa"
                separator=","
                @change="saveSelect"
                v-model="area">
 </area-cascader>
  </div>
</template>

<script>
  import 'vue-area-linkage/dist/index.css'
  import { pca, pcaa } from 'area-data'
  export default {
    name: "MyDistpicker",
    props:{
      question_key:String,
      value:''
    },
    data(){
      return{
        area:[],
        pca : pca,
        pcaa: pcaa,
        new_value:''
      }
    },
    watch:{
      value : function (val) {
        if(!this.isNull(val)){
          this.area = val.split(',')
        }
      }
    },
    mounted() {
      if(!this.isNull(this.value)){
        this.area = this.value.split(',')
      }
    },
    methods:{
      saveSelect(){
        this.new_value = this.area.join(',')
        this.$emit('saveSelect',[this.question_key,this.new_value])
      },
      isNull(item){
        return !item && typeof(item)!="undefined" && item!=0
      },
      getArea(){
        console.log(this.area)
      }
    }
  }
</script>

<style scoped>
  /deep/.area-select.large{
    width: 400px;
    line-height: 20px;
  }
  /deep/.area-select .area-selected-trigger{
    font-size: 18px;
    padding-left: 0;
  }
  /deep/.area-select.large i{
    display: none;
  }
  /deep/.area-select{
    border: none;
  }
</style>